<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			#box{
				width: 1200px;
				height: 450px;
				border: 1px solid #ddd;
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -225px -600px;
			}
			
			#box::before,
			#box::after{
				content: '';
				display: block;
				width: 45px;
				height: 60px;
				background-color: rgb(0 0 0/0.3 );
				color: #fff;
				text-align: center;
				line-height: 60px;
				position: absolute;
				top: 50%;
				margin-top: -30px;
				
			}
			
			#box::before{
				content: '<';
			}
			
			#box::after{
				content: '>';
				right: 0;
			}
			ul{
				list-style: none;
				padding: 2px 4px;
				background-color: rgb(164 157 178);
				overflow: hidden;
				width:fit-content;
				border-radius: 20px;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 60px;
				
			}
			li{
				width: 15px;
				height: 15px;
				background-color: rgb(183 183 183);
				border-radius: 50%;
				float: left;
			}
			li:not(:first-child){
				margin-left: 8px;
			}
		</style>
	</head>
	<body>
		<img src="img/微信图片_20211223161950.png" id="box"/>
       <div id="box">
       	 <ul>
       	 	<li></li>
       	 	<li></li>
       	 	<li></li>
       	 	<li></li>
       	 	<li></li>
       	 </ul>
       </div>
	</body>
</html>
